<template>
  <div
    v-if="isInited"
    class="echart-series-markLine visualComp"
  >
    <table class="markLines_table">
      <tr>
        <th style="width:30px">{{ $demoi18n('word.serialNumber') }}</th>
        <th style="width:80px">{{ $demoi18n('echart.th.series') }}</th>
        <th style="width:70px">{{ $demoi18n('echart.th.axis') }}</th>
        <th style="width:90px">{{ $demoi18n('echart.th.referenceValue') }}</th>
        <th style="width:200px">{{ $demoi18n('echart.th.lineColor') }}</th>
        <th style="width:100px">{{ $demoi18n('echart.th.lineweight') }}</th>
        <th style="width:80px">{{ $demoi18n('echart.th.lineType') }}</th>
        <th style="width:100px">{{ $demoi18n('echart.th.arrowShape') }}</th>
        <th style="width:100px">{{ $demoi18n('echart.th.description') }}</th>
        <th style="width:35px">{{ $demoi18n('echart.th.operation') }}</th>
      </tr>
      <tr
        v-for="(n, i) in data"
        :key="i"
      >
        <td>{{ i + 1 }}</td>
        <td>
          <ValueInputer
            v-model:value="n._serieName"
            :enum-values="serieNames"
            :rules="genRulesByKey('echart.series.markLine.data.[x]._serieName')"
          />
        </td>
        <td>
          <el-select
            v-model="n._axisType"
            size="default"
          >
            <el-option
              v-for="(n, i) in xyAxisTypes"
              :key="i"
              :label="n.label"
              :value="n.value"
            ></el-option>
          </el-select>
        </td>
        <td>
          <ValueInputer
            v-model:value="n._value"
            :enum-values="getMarkLineTypes(n)"
            :rules="genRulesByKey('echart.series.markLine.data.[x]._value')"
          />
        </td>
        <td>
          <div class="color_picker_wrap">
            <ColorPicker v-model:value="n.lineStyle.color" />
          </div>
        </td>
        <td>
          <Range
            v-model:value="n.lineStyle.width"
            type="input"
          />
        </td>
        <td>
          <el-select
            v-model="n.lineStyle.type"
            size="default"
          >
            <el-option
              v-for="(n1, i1) in lineTypes"
              :key="i1"
              :label="n1.label"
              :value="n1.value"
            ></el-option>
          </el-select>
        </td>
        <td>
          <div class="symbol">
            <div class="row">
              <ValueInputer
                v-model:value="n._symbol[0]"
                :enum-values="symbols"
                value-type="List"
              />
            </div>
            <div class="row">
              <ValueInputer
                v-model:value="n._symbol[1]"
                :enum-values="symbols"
                value-type="List"
              />
            </div>
          </div>
        </td>
        <td>
          <div class="name">
            <div class="row">
              <el-switch
                v-model="n.label.show"
                size="default"
              ></el-switch>
            </div>
            <div
              v-if="n.label.show"
              class="row"
            >
              <ValueInputer
                v-model:value="n.name"
                :rules="genRulesByKey('echart.series.markLine.data.[x].name')"
                :placeholder="$demoi18n('ehcart.placehoder.refLineName')"
              />
            </div>
            <div
              v-if="n.label.show"
              class="row"
            >
              <ValueInputer
                v-model:value="n.label.position"
                value-type="List"
                :enum-values="markLineNamePositions"
              />
            </div>
          </div>
        </td>
        <td>
          <el-button
            icon="Delete"
            :link="true"
            type="primary"
            @click="delMarkLine(n)"
          ></el-button>
        </td>
      </tr>
    </table>

    <div class="add_line">
      <el-button
        icon="Plus"
        size="default"
        @click="addMarkLine()"
      >
        {{ $demoi18n('btn.add') }}
      </el-button>
    </div>
  </div>
</template>
<script>
import {
  lineTypes,
  symbols,
  markLineTypes,
  markLineNamePositions,
  xyAxisTypes,
} from '@/components/common/echart/form-item-options.js';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import ColorPicker from '@/components/common/color-picker/color-picker.vue';
import Range from '@/components/common/range/range.vue';
import echartUtil from '@/components/common/echart/echart-util.js';
import echartDefault from '@/components/common/echart/echart-property-default.js';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';
import Helptip from '@/components/common/helptip/helptip.vue';

const dfMarkLine = echartDefault.echart.series.markLine;

export default {
  components: { ValueInputer, ColorPicker, Range, Helptip },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      lineTypes,
      symbols,
      markLineNamePositions,
      xyAxisTypes,
      symbol: JSON.parse(JSON.stringify(dfMarkLine.symbol)),
      data: JSON.parse(JSON.stringify(dfMarkLine.data)),
      isInited: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.initData();
    this.isInited = true;
  },
  methods: {
    initData() {
      echartUtil.registerVar('echart.series.markLine.data', this.form, this, []);
      this.data = this.form.echart.series.markLine.data;
    },
    addMarkLine() {
      const dataItem = JSON.parse(JSON.stringify(dfMarkLine.data[0]));
      const { componentStyle } = this.form;
      dataItem.lineStyle.color = dataItem.lineStyle._color[componentStyle];
      this.data.push(dataItem);
    },
    delMarkLine(n) {
      const index = this.data.indexOf(n);
      if (index > -1) {
        this.data.splice(index, 1);
      }
    },
    getMarkLineTypes(n) {
      if (n._axisType === 'x' && this.form.echart.xAxis.type === 'time') {
        return [];
      }
      if (n._axisType === 'y' && this.form.echart.yAxis.type === 'time') {
        return [];
      }
      return markLineTypes;
    },
  },
};
</script>
<style lang="less" scoped>
.echart-series-markLine {
  .markLines_table {
    margin-top: 10px;
    border-collapse: collapse;
    th,
    td {
      text-align: center;
      font-weight: normal;
      border: 1px solid #ccc;
      padding: 0 5px;
      font-size: 12px;
    }
    th {
      padding: 5px;
      word-break: keep-all;
    }
    .color_picker_wrap {
      display: flex;
      justify-content: center;
    }
    .symbol,
    .name {
      .row {
        margin-top: 5px;
      }
      margin-bottom: 5px;
    }
  }
  .add_line {
    margin-top: 10px;
  }
}
</style>
